#app {
  $menu-last-active：color: #303133;
  $menu-wrapper:#273543;
  @mixin menu-last{
    white-space: nowrap;
  }
  @mixin menu-center {
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    display: flex; 
    align-items: center;
  }
  // 主体区域
  .main-container {
    min-height: 100%;
    transition: margin-left .28s;
    position: relative;
    border-left: 1px solid rgb(242, 242, 242);
  }

  // 侧边栏
  .sidebar-container {
    transition: width 0.28s;
    width: 100px !important;
    height: 100%;
    position: fixed;
    font-size: 0px;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: visible;
    //reset element-ui css
    .horizontal-collapse-transition {
      transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
    }

    .scrollbar-wrapper {
      overflow-x: hidden !important;

      .el-scrollbar__view {
        height: 100%;
      }
    }

    .el-scrollbar__bar.is-vertical {
      right: 0px;
    }
    
    .is-horizontal {
      display: none;
    }

    a {
      display: inline-block;
      width: 100%;
      overflow: hidden;
    }

    .svg-icon {
      margin-right: 4px;
      // margin-left: -4px;
      margin-top: 0.15rem;
    }

    .el-menu {
      border: none;
      height: 100%;
      width: 100% !important;
    }
    .menu-wrapper>li.el-submenu{
      position: relative !important;
    }
    .menu-wrapper ul.el-menu {
      position: fixed;
      transition: none!important;
      left: 100px;
      top: 0;
      width: 110px !important;
      background: #ffffff !important;
    }

    .menu-wrapper ul li {
      position: relative;
      background: #ffffff !important;
    }

    .menu-wrapper ul li svg {
      display: none;
    }

    .is-active>.el-submenu__title {
      color: #f4f4f5 !important;
      background:#409EFF !important;
    }

    // .is-active.is-opened>ul.el-menu{
    //   display: block!important;
    // }
  
    .el-submenu__title {
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 36px!important;
      height: 36px!important;
      padding-left: 15px!important;
      @include menu-center
      .icon-slot{
        width: 0;
        span{
          display: inline-block;
          width: 55px;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .submenu-title-noDropdown {
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 36px!important;
      height: 36px!important;
      @include menu-center
      .icon-slot{
        width: 0;
        span{
          display: inline-block;
          width: 55px;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }

    .el-submenu__title.is-active,.submenu-title-noDropdown.is-active,/deep/ .el-submenu.is-active>.el-submenu__title{
      background: #409EFF !important;
      color: #ffffff !important;
    }
    
    /deep/ .menu-wrapper.nest-menu {
       >li.el-submenu .el-submenu__title{
        padding-bottom: 10px;
        &:hover{
          background-color: #f2f7ff !important;
        }
      }
      .el-submenu.is-active .el-submenu__title{
        color: $menuCurrent!important;
      }
    }
    
    .menu-wrapper{
      &:not(.nest-menu){
        padding-bottom: 10px;
        background-color: $menu-wrapper;
      }
    }

    .el-submenu__icon-arrow {
      display: none;
    }
  }

  .hideSidebar {
    .sidebar-container {
      width: 36px !important;
    }

    .main-container {
      margin-left: 36px;
    }

    .submenu-title-noDropdown {
      padding-left: 10px !important;
      position: relative;

      .el-tooltip {
        padding: 0 10px !important;
      }
    }

    .el-submenu {
      overflow: hidden;
      &>.el-submenu__title {
        padding-left: 10px !important;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .el-menu--collapse {
      .el-submenu {
        &>.el-submenu__title {
          &>span {
            height: 0;
            width: 0;
            overflow: hidden;
            visibility: hidden;
            display: inline-block;
          }
        }
      }
    }
  }

  .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
  .sidebar-container .el-submenu .el-menu-item {
    min-width: 110px !important;
    color: #666666!important;
    >span{
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 30px;
      line-height: 30px;
      margin-left: -10px;
      margin-right: 10px;
      padding: 0 10px!important;
    }
    &.is-active{
      // color: rgb(64, 158, 255)!important;
      >span{
          background: #ebedf0!important;
          color: $menuChild;
        }
      }
    &.group-menu-title{
      display: inline-block;
      height: 50px!important;
      line-height: 50px!important;
      color: #333333!important;
    }
    &.group-menu-title:hover{
      color: #333333!important;
      cursor : default;
    }
    background-color: $subMenuBg !important;
    padding:0 0 0 20px!important;
    height: 36px!important;
    line-height: 36px!important;
    &.group-end-menubox{
      height: 44px!important;
    }
    text-align: left;
    &:hover {
      color: #409EFF !important;
    }
  }

  .group-title{
    display: inline-block;
    position: relative;
    color: rgb(195, 195, 195);
    cursor: default;
    min-width: 110px !important;
    background-color: #ffffff !important;
    padding: 0 0 0 20px!important;
    // height: 30px;
    // line-height: 10px;
    font-size: 12px;
    margin-bottom: 14px;
    margin-top: 15px;
    text-align: left;
    &:hover{
      background: #fff;
    }
    .line-scope{
      position: absolute;
      top: -16px;
      left: 10px;
      right: 10px;
      height: 1px;
      background-color: #f2f2f2;
    }
  }

  .sidebar-container .nest-menu>li.el-submenu>ul.el-menu{
    @include menu-last;
    left: 250px;
    width: auto!important;
    height: auto;
    right: 250px;
    top: 0;
    a.menu-wrapper.nest-menu{
      width: auto!important;
      .is-last{
        position: relative;
        display: inline-block;
        text-align: center;
        text-overflow: ellipsis;
        background: transparent!important;
        overflow: hidden;
        padding: 0!important;
        width: 110px!important;
        line-height: 40px;
        &.is-active{
          @include line(after,50px,2px,rgb(64, 158, 255))
        }
      }
    }
  }
  .el-menu--collapse .el-menu .el-submenu {
    min-width: 100px !important;
  }
  .trademark{
    height: 60px;
    background: #273543;
  }
  .trademark-img{
    height: 32px;
    width: 32px;
    border-radius: 32px;
  }

  .group-end{
    border-width: 0px 0px 1px;
    border-style: solid;
    border-color: $group-end;
  }

  /deep/ .group-end-menu{
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    border-width: 0px 0px 1px;
    border-style: solid;
    border-color:$group-end;
  }

  //适配移动端
  .mobile {
    .main-container {
      margin-left: 0px;
    }

    .sidebar-container {
      transition: transform .15s;
      width: 100px !important;
    }

    &.hideSidebar {
      .sidebar-container {
        transition-duration: 0.3s;
        transform: translate3d(-100px, 0, 0);
      }
    }
  }

  .withoutAnimation {

    .main-container,
    .sidebar-container {
      transition: none;
    }
  }
}

.el-menu--vertical {
  &>.el-menu {
    .svg-icon {
      margin-right: 16px;
    }
  }
}
